<template>
	<div class="risk">
		<van-search
			class="info_search input_text"
			v-model="value"
			@search="onSearch"
			placeholder="搜索"
		/>
		<van-tabs v-model="active" @change="changeTabs()">
			<van-tab title="生成报告">
				<div class="report-list mt-10">
					<div class="mb-20">
						<div class="report-title">生成检查报告</div>
						<div class="report-btns">
							<van-button
								class="submit-btn"
								type="primary"
								@click="_goTaskReport"
							>
								按任务生成
							</van-button>
							<van-button
								type="info"
								class="submit-btn"
								@click="_goHiddenDangerReport"
							>
								按隐患生成
							</van-button>
						</div>
					</div>
					<div>
						<div class="report-title">生成整改报告</div>
						<div class="report-btns">
							<van-button
								class="submit-btn"
								type="primary"
								@click="_goCorrectiveReport"
							>
								按任务生成
							</van-button>
							<van-button
								type="info"
								class="submit-btn"
								@click="_goCorrectiveReportByDanger"
							>
								按隐患生成
							</van-button>
						</div>
					</div>
				</div>
			</van-tab>
			<van-tab title="报告历史">
				<div class="tab-content">
					<van-list :finished="finished" v-model="loading" @load="onLoad">
						<van-cell
							class="mb-10 mt-10 br-8"
							v-for="(item, index) in list"
							:key="index"
						>
							<div class="warn_item">
								<div>
									<div class="dep_sort_name">{{ item.Name }}</div>

									<van-row gutter="20" class="dep_sort">
										<van-col span="24">
											<img
												src="@/assets/Images/AppIcon/icon_list_type.png"
												alt=""
											/>{{ item.CheckTypeName }}</van-col
										>
									</van-row>
									<van-row gutter="20" class="dep_sort">
										<van-col span="24">
											<img
												src="@/assets/Images/AppIcon/icon_list_kind.png"
												alt=""
											/>{{ item.ReportName || '' }}</van-col
										>
									</van-row>
									<van-row gutter="20" class="dep_sort">
										<van-col span="10">
											<img
												src="@/assets/Images/AppIcon/icon_equ_type.png"
												alt=""
											/>检查报告</van-col
										>
										<van-col span="14">
											<img
												src="@/assets/Images/AppIcon/icon_list_danger.png"
												alt=""
											/>隐患：{{ item.HiddenDangerCnt }}</van-col
										>
									</van-row>
									<van-row gutter="20" class="dep_sort">
										<van-col span="10">
											<img
												src="@/assets/Images/AppIcon/icon_list_user.png"
												alt=""
											/>{{ item.CreateChnName }}</van-col
										>
										<van-col span="14">
											<img
												src="@/assets/Images/AppIcon/icon_list_date.png"
												alt=""
											/>{{ item.CreateDate|formatDateTime }}</van-col
										>
									</van-row>
								</div>
							</div>
							<div class="look-report" @click="lookPdf(item)">
								<img
									src="@/assets/Images/AppIcon/icon_list_review.png"
									alt=""
								/>
								<span>查看报告</span>
							</div>
						</van-cell>
					</van-list>
				</div>
			</van-tab>
		</van-tabs>
	</div>
</template>

<script>
import { list } from '@/api/sytech/sytechDangerCheckreport'
import { getDate } from '@/utils/getDate'
export default {
	data() {
		return {
			title:"",
			active: 0,
			value: '',
			list: [],
			filter: {
				page: 0,
				dataType: 'ReportHistory',
			},
			loading: false,
			finished: false,
			baseUrl: process.env.VUE_APP_BASE_API,
		}
	},
	created() {

	},
	methods: {
				onSearch() {
			this.filter.page = 0
			this.filter.keywords = this.value
			this.getList()
		},
		clearSearch() {
			this.filter.page = 0
			this.filter.keywords = ''
			this.getList()
		},
		changeTabs() {
			this.filter.page = 0
			this.getList()
		},
		getList() {
			this.loading = true
			list(this.filter).then((res) => {
				this.loading = false
				if (!res.data.HasNextPage) {
					this.finished = true
				}
				this.list = res.data.Data
				this.filter.page = res.data.PageIndex
			})
		},
		onLoad() {
			this.loading = true
			++this.filter.page
			list(this.filter).then((res) => {
				this.loading = false
				res.data.Data.forEach((item) => {
					item.CreateDate = getDate(item.CreateDate)
				})
				this.filter.page = res.data.PageIndex
				this.list = this.list.concat(res.data.Data)
				if (!res.data.HasNextPage) {
					this.finished = true
				}
			})
		},
		
		// 检查报告
		_goTaskReport() {
			this.title = "生成检查报告(按任务)"
			this.$router.push({
				path: '/SytechDanger/TaskReport',
				query: { type: "Report",reportType:"3" },
			})
		},
		// 隐患生成
		_goHiddenDangerReport() {
			this.title = "生成检查报告(按隐患)"
			this.$router.push({
				path: '/SytechDanger/HiddenDangerReport',
				query: { type: "ReportTaskDetail",reportType:"3" },
			})
		},
		// 整改报告
		_goCorrectiveReport() {
			this.title = "生成整改报告(按任务)"
			this.$router.push({
				// path: '/SytechDanger/TaskReport',
				path: '/SytechDanger/CorrectiveReport',
				query: { type: "Report",reportType:"4" },
			})
		},
		// 整改隐患
		_goCorrectiveReportByDanger() {
			this.title = "生成整改报告(按隐患)"
			this.$router.push({
				// path: '/SytechDanger/HiddenDangerReport',
				path: '/SytechDanger/CorrectiveHiddenDanger',
				query: { type: "ReportTaskDetail",reportType:"4" },
			})
		},
		// 查看报告
		lookPdf(item) {
			// this.title = "报告详情"
			// this.$router.push("/Attach/AatachDetail?url=" + this.baseUrl + item.Attachs);
			// 打开新窗口
			// window.open(this.baseUrl + item.Attachs)
			this.title = "报告详情"
			this.$router.push({
				path: '/SytechDanger/CheckReportDetail',
				query: {
					url: this.baseUrl + item.Attachs,
				},
			})
		},
	},
}
</script>

<style lang="less" scoped>
.risk {
	background-color: #e8f1f8;
	.info_search {
		padding: 10px;
		border-radius: 5px !important;
		.van-field__control {
			background-color: #ffffff !important;
		}
	}
}

.tab-content {
	padding: 0 10px;
	font-size: 14px;
	img {
		height: 15px;
		width: 15px;
		margin-right: 5px;
	}
}
.look-report {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 10px;

	font-size: 12px;
	color: #666;
	border-top: 1px solid #eee;
}
.all_dep {
	background-color: #ffffff;
}
.warn_item {
	background-color: #ffffff;
	/*margin-bottom: 10px;*/
	// padding: 10px 0 10px 10px;
	border-radius: 5px;
	position: relative;
}
.warn_header {
	display: flex;
	justify-content: space-between;
	position: relative;
	margin-bottom: 10px;
	.warn_tag {
		position: absolute;
		right: 0;
		top: 0;
		border-radius: 26.64rem 0 0 26.64rem;
	}
}
.dep_sort_name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dep_btm {
	display: flex;
	justify-content: flex-end;
	.btm_item {
		display: flex;
		align-items: center;
		img {
			height: 15px;
			width: 15px;
			margin-right: 5px;
		}
	}
}
.report-list {
	height: 100vh;
	background-color: #fff;
	overflow: hidden;
}
.report-title {
	width: 100px;
	font-size: 15px;
	text-align: center;
	margin: 40px auto;
	padding-bottom: 10px;
	border-bottom: 1px solid #ccc;
}
.report-btns {
	margin-top: 10px;
	padding: 0 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.submit-btn {
		width: 40%;
		height: 35px;
		font-size: 14px;
	}
}
</style>
